<template>
  <view class="b-uploader">
    <template v-for="(file, index) in fileViewList">
      <view class="b-uploader--item" :key="index">
        <!-- 图片类型 -->
        <template v-if="isImage(file.file_type)">
          <u-image width="100%" height="100%" :src="viewBaseUrl + file.archives_url" @click="previewImage(file)"></u-image>
        </template>
        <template v-else>
          <view class="file-item">
            <text class="file-item--type">{{file.file_type}}</text>
            <text class="file-item--icon custom-icon custom-icon-wenjian"></text>
          </view>
        </template>
      </view>
    </template>
    <view class="b-uploader--item b-uploader--upload">
      <lsj-upload ref="lsjUpload" width="140rpx" height="140rpx" childId="upload" :size="10" v-model="percent" @input="onInput" @callback="onCallback">
        <u-icon class="upload-icon" color="#999" size="40" name="plus"></u-icon>
      </lsj-upload>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    // 请求地址
    url: {
      type: String,
      default: '/admin/file/uploadFile'
    },
    // 获取文件列表的请求地址
    viewUrl: {
      type: String,
      default: '/admin/file/getFileData'
    },
    // 文件资源基础路径
    viewBaseUrl: {
      type: String,
      default: '/m-web/admin/file/tiny/'
    },
    // 请求头
    headers: {
      type: Object
    },
    // 参数
    formData: {
      type: Object,
      default: () => ({
        relation_id: 'GD202106300003',
        material_type: '0701',
        archives_type: '07',
        method: 'POST'
      })
    },
    // 文件大小限制
    size: {
      type: Number,
      default: 10
    }
  },
  // onReady() {
  //   this.onCreate()
  // },
  data() {
    return {
      percent: '',
      fileViewList: []
    }
  },
  mounted() {
    this.onCreate()
    this.getFileList()
  },
  methods: {
    // 获取文件列表
    async getFileList() {
      const { data } = await this.$http.post(this.viewUrl, this.formData)
      this.fileViewList = data.fileData
    },
    isImage(type) {
      let suffix = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      return suffix.includes(type)
    },
    // 预览图片
    previewImage(file) {
      let suffix = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      let urls = []
      this.fileViewList.forEach((file) => {
        if (suffix.includes(file.file_type)) {
          urls.push(this.viewBaseUrl + file.archives_url) 
        }
      })
      uni.previewImage({
        urls: urls,
        current: this.viewBaseUrl + file.archives_url,
        indicator: 'default',
        fail: (e) => {
          console.log(e)
        }
      })
    },
    // 文件上传相关
    onClose() {
      this.$refs.lsjUpload.close()
    },
    onCreate() {
      // 初始化参数并创建上传DOM
      this.$refs.lsjUpload.create({
        // #ifdef APP-PLUS
        cuWebview: this.$mp.page.$getAppWebview(), // app必传
        // #endif
        url: this.$http.defaults.baseURL + this.url, //替换为你的接口地址
        name: 'file', // 附件key
        size: this.size, // 附件上传大小上限(M)，默认10M
        debug: true,
        //根据你接口需求自定义请求头
        header: this.headers || {
          'X-Token': this.$http.defaults.headers['X-Token']
        },
        //根据你接口需求自定义body参数
        formData: this.formData
      })
    },
    onInput(e) {
      console.log('上传进度', e)
    },
    onCallback(e) {
      console.log('上传结果', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.b-uploader {
  display: grid;
  grid-template-columns: repeat(auto-fill, 140rpx);
  position: relative;
  grid-gap: 20rpx;
  &--item,
  .upload-icon,
  .file-item {
    width: 140rpx;
    height: 140rpx;
    border-radius: 12rpx;
    overflow: hidden;
  }
  .upload-icon {
    justify-content: center;
    background: #e9edef;
  }
  .file-item {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    background: #f4f4f4;
    &--icon {
      position: absolute;
      font-size: 120rpx;
      color: #999;
    }
    &--type {
      color: #999;
    }
  }
}
</style>